<template>
  <div>
    <h1>商品详情页</h1>
    <p>商品名称 {{ list.name }}</p>
    <p>商品描述 {{ list.subtitle }}</p>
    <p>
      当前状态
      <span v-if="list.status == '1'">已下架</span>
      <span v-else>在售</span>
    </p>
    <span>所属分类</span>
    <el-select v-model="from" placeholder="请选择一级品类" @change="getson">
      <el-option
        :label="item.name"
        :value="item.id"
        v-for="(item, index) in cateList"
        :key="index"
      ></el-option>
    </el-select>
    <el-select v-model="form"  placeholder="请选择二级品类">
      <el-option
        :label="item.name"
        :value="item.id"
        v-for="(item, index) in cateLists"
        :key="index"
      >
      </el-option>
    </el-select>
    <p>商品价格 {{ list.price }}</p>
    <p>商品库存 {{ list.stock }}</p>
    <p>
      商品图片
      <img :src="list.imageHost+list.subImages" alt="网速不好出不来呀" />
    </p>
  </div>
</template>
<script>
import { goods_detail, goods_cate, goods_cates } from "@/api/api";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      list: [],
      cateList: [],
      cateLists: [],
      from: "",
      form: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getlist();
    this.getcate();
  },
  methods: {
    async getlist() {
      let id = this.$route.query.id;
      const { data: res } = await goods_detail(
        `/api/product/detail.do?productId=${id}`
      );
      this.list = res.data;
    },
    // 品类获取
    async getcate() {
      const res = await goods_cate();
        this.cateList = res.data.data;
    },
    async getson(id) {
      const { data: res } = await goods_cates(id);
      console.log(res);
      this.cateLists = res.data;
    },
  },
};
</script
<style scoped>
</style>